@charset "utf-8";
@import "../../../../layout/sass/_mixin-fun.scss";
.right {
	.classify {
		width: 100%;
		margin-bottom: 20px;
		.row {
			width: 100%;
			padding: 10px 0 0 60px;
			border-bottom: 1px dashed #cacaca;
			position: relative;
			label {
				display: block;
				float: left;
				font-size: 12px;
				color: #888888;
				position: absolute;
				top: 10px;
				left: 0;
			}
			.item {
				padding: 0 40px 10px 0;
				float: left;
				font-size: 12px;
				color: #555555;
				cursor: pointer;
				a {
					text-decoration: none;
					color: #555555;
					&:hover {
						color: #dc4b4e;
					}
				}
				&:hover {
					color: #dc4b4e;
				}
				&.active {
					color: #dc4b4e;
					a {
						color: #dc4b4e;;
					}
				}
			}//item
		}//row
	}//classify
	.options {
		width: 800px;
		position: relative;
		margin-top: 24px;
		height: 30px;
		line-height: 30px;
		ul {
			float: left;
			height: 30px;
			line-height: 30px;
			li {
				float: left;
				padding: 0 16px 0 10px;
				height: 30px;
				line-height: 30px;
				border: 1px solid #CACACA;
				margin-right: -1px;
				color: #888888;
				font-size: 14px;
				position: relative;
				cursor: pointer;
				i {
					position: absolute;
					top: 50%;
					margin-top: -2px;
					right: 6px;
					width: 8px;
				    height: 6px;
				    background-position: -140px -7px;
				}
				&.up {
					i {
						background-position: -149px -7px;
					}
				}
				&.active {
					border-color: $global-color;
					color: $global-color;
					z-index: 1;
					i {
						background-position: -122px -7px;
					}
					&.up {
						i {
							background-position: -131px -7px;
						}
					}
				}//active
				&:hover {
					color: #dc4b4e;
				}
			}
		}//ul
		span.tt {
        	display: block;
        	float: left;
        	margin-left: 20px;
        	input.search-name {
        		margin-left: 0;
        	}
        }
		input.search-name {
			margin-left: 20px;
			border: 1px solid #cacaca;
		    padding: 0 5px;
		    height: 30px;
		    float: left;
		    display: block;
		    color: #a7a7a7;
		    &.tt-input {
          		color: #555;
	      	}
	      	&.tt-hint {
	        	color: #A5A5A5;
	      	}
	    }
	    .tt-menu {
        	width: 100%;
        	background: white;
        	z-index: 5;
        	border: {
          		left: 1px solid #e6e6e6;
          		bottom: 1px solid #e6e6e6;
          		right: 1px solid #e6e6e6;
        	}
        	.tt-suggestion {
        		width: 100%;
          		line-height: 30px;
          		height: 24px;
          		padding-left: 5px;
          		cursor: pointer;
          		strong {
            		color: #F40;
            		font-weight: 700;
          		}	
          		&.tt-cursor {
            		background: #efefef;
          		}
          		&:hover {
            		color: $global-color;
          		}
        	}//tt-suggestion
      	}//tt-menu
		.option-price {
			margin-left: 10px;
			float: left;
			height: 30px;
			line-height: 30px;
			input {
				float: left;
				display: block;
				border: 1px solid #CACACA;
				width: 60px;
				height: 30px;
				color: #888888;
				padding: 0 5px;
				font-size: 14px;
				line-height: 30px;
			}
			span {
				float: left;
				display: block;
				width: 25px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: #CACACA;
			}
			button {
				float: left;
				display: block;
				margin-left: 5px;
				height: 30px;
				padding: 0 8px;
				color: white;
				background: $global-color;
				font-size: 14px;
			}
		}//option-price
		.option-search {
			width: 200px;
			height: 30px;
			position: absolute;
			right: 0;
			top: 0;
			input {
				float: left;
				width: 170px;
				height: 30px;
				border: 1px solid #CACACA;
				border-right: none;
				font-size: 14px;
				color: #888;
				padding: 0 5px;
			}
			button {
				background: $global-color;
				height: 30px;
				width: 30px;
				float: left;
			}
		}//option-search
	}//options
	.show-area {
		width: 100%;
		padding-bottom: 50px;
		position: relative;
		.no-goods {
			height: 330px;
			width: 100%;
			color: #dc4b4e;
			font-size: 20px;
			text-align: center;
			line-height: 330px;
		}
		.one-block {
			width: 25%;
			padding: 10px 10px;
			display: block;
			float: left;
			margin-bottom: 28px;
			cursor: pointer;
			border: dotted 1px #fff;
			text-decoration: none;
			position: relative;
			i.get {
				position: absolute;
				top: 0;
				right: 0;
				width: 50px;
				height: 20px;
				background: #888;
				background: rgba(128,128,128,0.7);
				display: none;
				font-size: 12px;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
				color: white;
			}
			&:hover {
				border: solid 1px #ddd;
    			box-shadow: 0 0 8px #ddd;
    			i.get {
    				display: block;
    			}
			}
			img {
				width: 100%;
				height: 180px;
			}
			p.title {
				margin-top: 15px;
				color: black;
				font-size: 12px;
				height: 40px;
				overflow: hidden;
				&:hover {
    				color: #dc4b4e;
    			}
			}
			ul.small-img {
				width: 100%;
				margin-top: 5px;
				li {
					float: left;
					width: 20%;
					height: 35px;
					overflow: hidden;
					cursor: pointer;
					margin-bottom: 3px;
					padding: 1px;
					&.active {
						img {
							border-color: #dc4b4e;
						}
					}
					img {
						width: 100%;
						height: 100%;
						border: 1px solid #dddddd;
					}
				}
			}
			p.price {
				line-height: 20px;
				font-size: 14px;
				margin-top: 10px;
				span {
					display: block;
					&.num {
						float: left;
						color: $global-color;
						font-weight: bold;
					}
					&.data {
						float: right;
						color: #888888;
						font-size: 14px;
						i {
							color: $global-color;
							margin-right: 5px;
						}
					}
				}//span
			}//price
		}//one-block
		.pagination {
			position: absolute;
			bottom: 0;
			right: 0;
			li.active {
				a {
					background: $global-color;
				}
			}
		}//pagination
	}//show-area
}